import React from 'react';
import { Box, Typography, Chip, Avatar, Paper } from '@mui/material';
import { Player, GamePhase } from '../../store/gameSlice';
import PlayingCard from './PlayingCard';

interface PlayerAreaProps {
  player: Player;
  isCurrentPlayer: boolean;
  isDealer: boolean;
  isTurn: boolean;
  gamePhase: GamePhase;
  showCards: boolean;
  position?: 'top' | 'left' | 'right' | 'bottom';
}

const PlayerArea: React.FC<PlayerAreaProps> = ({
  player,
  isCurrentPlayer,
  isDealer,
  isTurn,
  gamePhase,
  showCards,
  position = 'bottom'
}) => {
  const getPositionStyles = () => {
    switch (position) {
      case 'top':
        return {
          flexDirection: 'column' as const,
          alignItems: 'center',
        };
      case 'left':
        return {
          flexDirection: 'row' as const,
          alignItems: 'center',
        };
      case 'right':
        return {
          flexDirection: 'row-reverse' as const,
          alignItems: 'center',
        };
      case 'bottom':
      default:
        return {
          flexDirection: 'column' as const,
          alignItems: 'center',
        };
    }
  };

  const getCardContainerDirection = () => {
    return position === 'left' || position === 'right' ? 'column' : 'row';
  };

  return (
    <Paper
      elevation={isTurn ? 8 : 2}
      sx={{
        p: 2,
        minWidth: 150,
        border: isTurn ? '2px solid #4caf50' : '1px solid #ccc',
        borderRadius: 2,
        backgroundColor: isCurrentPlayer ? '#e3f2fd' : '#f5f5f5',
        transition: 'all 0.3s ease',
        ...getPositionStyles()
      }}
    >
      {/* 玩家头像和信息 */}
      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
        <Avatar
          sx={{
            bgcolor: isTurn ? '#4caf50' : '#757575',
            width: 40,
            height: 40,
            mr: 1
          }}
        >
          {player.username.charAt(0).toUpperCase()}
        </Avatar>
        <Box>
          <Box component="div" sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant="body2" fontWeight="bold" component="span">
              {player.username}
              {isCurrentPlayer && ' (你)'}
            </Typography>
            {isDealer && (
              <Chip
                label="庄"
                size="small"
                color="primary"
                sx={{ ml: 1, height: 20, fontSize: '0.6rem' }}
              />
            )}
          </Box>
          <Typography variant="caption" color="text.secondary">
            筹码: ${player.chips}
          </Typography>
        </Box>
      </Box>

      {/* 玩家状态 */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 1 }}>
        {player.hasFolded && (
          <Chip label="已弃牌" size="small" color="default" />
        )}
        {player.isAllIn && (
          <Chip label="All In" size="small" color="error" />
        )}
        {isTurn && (
          <Chip label="思考中..." size="small" color="success" />
        )}
      </Box>

      {/* 当前下注 */}
      {player.currentBet > 0 && (
        <Typography variant="caption" sx={{ mb: 1 }}>
          下注: ${player.currentBet}
        </Typography>
      )}

      {/* 玩家手牌 */}
      {player.cards && player.cards.length > 0 && (
        <Box
          sx={{
            display: 'flex',
            flexDirection: getCardContainerDirection(),
            gap: 0.5,
            mt: 1
          }}
        >
          {player.cards.map((card, index) => (
            <PlayingCard
              key={index}
              card={card}
              isHidden={!showCards}
              size="small"
            />
          ))}
        </Box>
      )}
    </Paper>
  );
};

export default PlayerArea;